<template>
  <el-card class="application-plugin-container">
    <div>
      <el-page-header @back="$router.back()" content="插件管理"></el-page-header>
      <div class="short-link-info">
        <img src="/img/my-short-chain-images/short-chain-management-images/short_chain_info_logo.png" alt="short_chain_info_logo">
        <div class="short-link-content">
          <h3>Emolog后台登录</h3>
          <span>https://lanhuapp.com</span>
        </div>
      </div>
      <div class="plugin-btn-box">
        <el-button :class="applicationPlugin.pluginVersion  ===  1 ? 'active':''" type="text" size="mini"
                   @click="selectPlugin(1)">跳转插件</el-button>
        <div class="vertical-line"></div>
        <el-button :class="applicationPlugin.pluginVersion  ===  2 ? 'active':''" type="text" size="mini"
                   @click="selectPlugin(2)">策略插件</el-button>
        <div class="vertical-line"></div>
        <el-button :class="applicationPlugin.pluginVersion  ===  3 ? 'active':''" type="text" size="mini"
                   @click="selectPlugin(3)">唤醒插件</el-button>
      </div>
    </div>
    <el-table :data="applicationPlugin.tableData" :max-height="applicationPlugin.tableMaxHeight">
      <el-table-column prop="name" label="插件" width="180px">
        <template #default="scope">
          <div class="table-plugin-name-box">
            <div class="img-box" :style="{backgroundColor:scope.row.imgBgcolor}">
              <img :src="imgRootSrc+scope.row.img" alt="logo"/>
            </div>
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="explain" label="说明">
      </el-table-column>
      <el-table-column label="是否开启">
        <template #default="scope">
          <el-switch></el-switch>
        </template>
      </el-table-column>
<!--      <el-table-column label="操作" v-if="applicationPlugin.pluginVersion  !==  3">-->
      <el-table-column label="操作">
        <template #default="scope">
          <el-link type="info" @click.prevent="openConfigDrawer(scope.row)">
            <span v-if="scope.row.name !== '爬虫访问'">配置功能</span>
            <span v-else>查看日志</span>
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer custom-class="application-plugin-drawer" v-model="applicationPlugin.showConfigDrawer" destroy-on-close>
      <h3>{{ configDrawerData.name }}插件</h3>
      <div class="open-status">已开启</div>
      <el-form class="plugin-config-form" ref="pluginConfigFormRef" :model="pluginConfigForm" label-position="top">
        <el-form-item label="访问模式" v-if="configDrawerData.name === '微信跳转'">
          <el-radio-group v-model="model">
            <el-radio :label="label1">间接访问</el-radio>
            <el-radio :label="label2">直接访问</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="time-period-access-plugin" label="时间" v-if="configDrawerData.name === '时间段访问'">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :shortcuts="shortcuts"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <div v-if="configDrawerData.name === 'IP访问'">
          <el-form-item label="IP搜索">
            <el-input placeholder="查找限制IP">
              <template #suffix>
                <i class="el-input__icon el-icon-search"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="限制IP">
            <div class="limit-ip-box">
              <el-input placeholder="请输入您要限制的IP"></el-input>
              <el-button type="warning">添加</el-button>
            </div>
          </el-form-item>
          <div class="restricted-ip-box">
            已限制的IP
            <div>
              <el-button type="primary" size="mini" plain>导入</el-button>
              <el-button type="success" size="mini" plain>导出</el-button>
            </div>
          </div>
          <el-form-item>
            <div class="limit-ip-box">
              <el-input disabled></el-input>
              <el-button class="remove-btn" type="danger" icon="el-icon-minus" circle title="移除对该IP的限制"></el-button>
            </div>
          </el-form-item>
          <el-alert title="禁止访问IP黑名单，若要恢复请删除添加的IP黑名单。" type="warning" show-icon>
          </el-alert>
        </div>
        <el-form-item v-if="configDrawerData.name === '网络访问'" label="选择网络环境">
          <el-radio-group>
            <el-radio>不限</el-radio>
            <el-radio>WI-FI</el-radio>
            <el-radio>移动数据</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="configDrawerData.name === '设备访问'" label="选择操作系统">
          <el-radio-group>
            <el-radio>不限</el-radio>
            <el-radio>IOS</el-radio>
            <el-radio>Android</el-radio>
            <el-radio>Mac</el-radio>
            <el-radio>Windows</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="configDrawerData.name === '地区访问'" label="选择地区">
          <el-cascader :options="options" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item v-if="configDrawerData.name === '网页加密'" label="访问密码">
          <el-input placeholder="请设置访问密码"></el-input>
        </el-form-item>
        <div class="api-limit" v-if="configDrawerData.name === 'API生成上限提醒'">
          API生成次数已用完，可<el-link type="primary">升级套餐</el-link>，继续使用
        </div>
        <div class="crawler-visit" v-if="configDrawerData.name === '爬虫访问'">
          <h4>查看爬虫访问日志</h4>
          <div class="crawler-visit-item" v-for="item in applicationPlugin.crawlerVisit" :key="item">
            <div class="crawler-visit-item-header">
              <strong>{{item.ip}}</strong>
              {{item.date}}
            </div>
            <span>UA:</span> {{item.ua}}
          </div>
        </div>
        <div class="taobao-app-jump" v-if="configDrawerData.name === '淘宝APP跳转'">
          点击淘宝APP内分享出来的链接，<span>复制淘宝链接到创建短链接处</span>，系统会自动识别并将最终生成的短链赋予唤起淘宝APP的能力。
          <el-alert title="注意唤醒类插件和跳转类插件不能同时开启。" type="warning" show-icon>
          </el-alert>
        </div>
      </el-form>
      <div class="plugin-config-btn" v-if="configDrawerData.name !== '爬虫访问'">
        <el-button size="mini" @click="applicationPlugin.showConfigDrawer = false">取消</el-button>
        <el-button type="primary" size="mini">确定</el-button>
      </div>
    </el-drawer>
  </el-card>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'

let applicationPlugin = reactive({
  pluginVersion: null,
  tableData: [],
  showConfigDrawer:false,
  configDrawerData:[],
  pluginConfigForm:{},
  crawlerVisit:[
    { ip:'36.51.135.158',date:'2021-06-21',ua:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36 Edg/92.0.902.84' }
  ],
  tableMaxHeight: window.innerHeight - 378
})
const imgRootSrc = '/img/my-short-chain-images/application-plugin-images/'
// 监听页面宽高变化
const resizeHeight = ()=>applicationPlugin.tableMaxHeight = window.innerHeight - 378
onMounted(()=>window.addEventListener('resize',resizeHeight))
onUnmounted(()=>window.removeEventListener('resize',resizeHeight))

let { configDrawerData } = toRefs(applicationPlugin)

onMounted(() => {
  selectPlugin(1)
})
const selectPlugin = num => {
  applicationPlugin.pluginVersion = num
  if (applicationPlugin.pluginVersion === 1) {
    applicationPlugin.tableData = [
      {img: 'weixin_logo.png', name: '微信跳转', explain: '设置微信内置浏览器打开提示引导或直接访问'},
      {img: 'qq_logo.png', name: 'QQ/TIM跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
      {img: 'zhifubao_logo.png', name: '支付宝跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
      {img: 'weibo_logo.png', name: '微博跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
    ]
  } else if (applicationPlugin.pluginVersion === 2) {
    applicationPlugin.tableData = [
      {img: 'time_period_visit_logo.png', name: '时间段访问', explain:'查看时间段访问链接'},
      {img: 'ip_logo.png', name: 'IP访问', explain:'设置IP限制访问'},
      {img: 'network_access_logo.png', name: '网络访问', explain:'设置网络设备访问'},
      {img: 'device_access_logo.png', name: '设备访问', explain:'设置网络设备访问'},
      {img: 'regional_visit_logo.png', name: '地区访问', explain:'设置网络设备访问'},
      {img: 'web_page_encryption_logo.png', name: '网页加密', explain:'设置网络设备访问'},
      {img: 'crawler_visit_logo.png', name: '爬虫访问', explain:'设置网络设备访问'},
      {img: 'read_the_burn_logo.png', name: '阅读立焚', explain:'设置网络设备访问'},
      {img: 'api_limit_logo.png', name: 'API生成上限提醒', explain:'设置网络设备访问'},
    ]
  } else if (applicationPlugin.pluginVersion === 3) {
    applicationPlugin.tableData = [
      {img: 'taobao_logo.png',imgBgcolor:'#FFA93C', name: '淘宝APP跳转', explain: '设置微信内置浏览器打开提示引导或直接访问'},
      {img: 'jd_logo.png',imgBgcolor:'#FF576E', name: '京东APP跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
      {img: 'pinduoduo_logo.png',imgBgcolor:'#FF576E', name: '拼多多APP跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
      {img: 'douyin_logo.png',imgBgcolor:'#00C18B', name: '抖音APP跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
      {img: 'weishi_logo.png',imgBgcolor:'#0766FE', name: '微视APP跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
      {img: 'pipixia_logo.png',imgBgcolor:'#FF576E', name: '皮皮虾APP跳转', explain: '设置QQ/TIM内置浏览器打开提示引导或直接访问'},
    ]
  }
}
// 打开配置功能方法
const openConfigDrawer = row =>{
  applicationPlugin.showConfigDrawer = true
  applicationPlugin.configDrawerData = row
}
</script>

<style lang="less" scoped>
.application-plugin-container{
  border-radius: 12px!important;
  height: 100%;
  box-sizing: border-box;
  &:deep(.el-card__body){
    height: 100%;
    box-sizing: border-box;
    padding-left: 32px;
  }
  &:deep(.el-page-header){
    color: @primary;
    .el-page-header__content{
      font-size: 20px;
      color: @primary;
    }
  }
  .short-link-info{
    height: 80px;
    background-color: #F3F8FF;
    margin-top: 30px;
    box-sizing: border-box;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    img{
      height: 48px;
      margin-right: 24px;
    }
    .short-link-content{
      h3{
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 8px;
      }
      span{
        font-size: 14px;
        font-weight: 500;
        color: @tips-text;
      }
    }
  }
  .plugin-btn-box{
    display: flex;
    align-items: center;
    height: 24px;
    margin-bottom: 32px;
    margin-top: 40px;
    .vertical-line {
      width: 2px !important;
      height: inherit;
      background-color: @primary !important;
    }

    .el-button--text {
      display: flex;
      align-items: center;
      justify-content: center;
      color: @tips-text;
      width: 120px;
      height: inherit;
      font-size: 16px;
      font-weight: bold;
      line-height: 22px;
    }

    .el-button--text.active {
      color: @primary;
    }
  }
  .el-table {

    &:before{
      height: 0;
    }
    thead{
      tr{
        th{
          &:nth-of-type(1){
            text-align: center;
          }
        }
      }
    }
    &:deep(.el-table__body-wrapper){
      .el-table__body {
        .el-table__row {
          height: 78px;

          td {
            .cell {
              .table-plugin-name-box {
                display: flex;
                align-items: center;
                .img-box {
                  width: 36px;
                  height: 36px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 50%;
                  margin-right: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
  .application-plugin-drawer{
    .el-drawer__body{
      h3{
        font-size: 24px!important;
        margin-bottom: 40px!important;
      }
      .open-status{
        width: 120px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid @primary;
        display: flex;
        align-items: center;
        justify-content: center;
        color: @primary;
        user-select: none;
        margin-bottom: 60px;
      }
      .plugin-config-form{
        &:deep(.el-form-item){
          .el-form-item__label{
            font-size: 16px;
            color: @title;
            line-height: 22px;
            margin-bottom: 15px;
          }
          .el-form-item__content{
            .limit-ip-box{
              display: flex;
              align-items: center;
              .el-button--warning{
                width: 96px;
                height: 40px;
                margin-left: 15px;
              }
            }
            .el-cascader{
              width: 100%;
            }
          }
        }
        .restricted-ip-box{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          .el-button{
            width: 96px;
            height: 32px;
          }
        }
      }
      .crawler-visit{
        h4{
          margin-bottom: 50px;
        }
        .crawler-visit-item{
          color: @secondary;
          font-size: 12px;
          line-height: 18px;
          .crawler-visit-item-header{
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 600;
            color: @tips-text;
            margin-bottom: 12px;
            strong{
              font-size: 18px;
              color: @primary;
            }
          }
          span{
            font-size: 14px;
            color: @title;
          }
        }
      }
      .api-limit{
        display: flex;
        align-content: center;
        font-size: 14px;
        .el-link{
          font-size: 14px;
        }
      }
      .taobao-app-jump{
        font-size: 14px;
        font-weight: 400;
        color: @secondary;
        line-height: 24px;
        span{
          color: @primary;
        }
        .el-alert{
          margin-top: 40px;
        }
      }
      .plugin-config-btn{
        margin-top: 60px;
        .el-button{
          width: 96px;
          height: 32px;
        }
      }
    }
  }
}
</style>
